<template>
  <div class="manage-content"
    v-loading="listLoading"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.5)">
    <div class="search-content">
      <div class="search-item">平台
        <el-select 
          v-model="searchParams.platform"
          placeholder="请选择平台"
          class="item-select">
          <el-option
            v-for="item in platformList"
            :key="item.code"
            :label="item.name"
            :value="item.code">
          </el-option>
        </el-select>
      </div>
      <div class="search-item">单位
        <el-cascader
          class="item-select"
          ref="cascader"
          v-model="searchParams.dwbm"
          filterable
          change-on-select
          :options="companyList"
          :show-all-levels="false"
          :props="{ expandTrigger: 'hover', label: 'dwmc', value: 'dwbm', emitPath: false }"
          placeholder="请选择单位"
          @change="$refs.cascader.toggleDropDownVisible()">
        </el-cascader>
      </div>
      <div class="search-item">账号
        <el-input
          v-model="searchParams.dlbm"
          placeholder="请输入账号"
          clearable
          class="item-select"></el-input>
      </div>
      <div class="search-item">姓名
        <el-input
          v-model="searchParams.mc"
          placeholder="请输入姓名"
          clearable
          class="item-select"></el-input>
      </div>
      <el-button class="search-btn" @click="getTableList(1)">筛选</el-button>
    </div>
    <div class="table-content">
      <div class="list" v-show="tableData.length > 0">
        <el-table
          ref="tableContent"
          :data="tableData"
          :row-key="getRowKey"
          border
          stripe
          style="width: 100%;height: 100%"
          height="100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="50">
          </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            width="80">
            <template slot-scope="scope">
              <span>{{(tablePageData.currentPage - 1) * tablePageData.pageSize + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="name1"
            label="部门">
            <template slot-scope="scope">
              <!-- <el-tooltip :content="scope.row.dwmc" placement="top"> -->
                <span class="desc-style">{{scope.row.zzdwmc}}</span>
              <!-- </el-tooltip> -->
            </template>
          </el-table-column>
          <el-table-column
            label="姓名">
            <template slot-scope="scope">
              <!-- <el-tooltip :content="scope.row.mc" placement="top"> -->
                <span class="desc-style">{{scope.row.mc}}</span>
              <!-- </el-tooltip> -->
            </template>
          </el-table-column>
          <el-table-column
            label="账号">
            <template slot-scope="scope">
              <!-- <el-tooltip :content="scope.row.dlbm" placement="top"> -->
                <span class="desc-style">{{scope.row.dlbm}}</span>
              <!-- </el-tooltip> -->
            </template>
          </el-table-column>
          <el-table-column
            label="已推送问题数"
            prop="pushedClueNum">
          </el-table-column>
          <el-table-column
            label="在办监督案件"
            prop="doingCaseNum">
          </el-table-column>
        </el-table>
      </div>
      <div class="page-box" v-show="tableData.length > 0">
        <el-pagination
          class="table-page"
          @size-change="handelSizeChange"
          @current-change="handelCurrentChange"
          :current-page="tablePageData.currentPage"
          :page-sizes="tablePageData.pageSizes"
          :page-size="tablePageData.pageSize"
          background
          layout="total, sizes, slot, prev, pager, next"
          :total="tablePageData.total">
          <span class="page-item first" @click="handelCurrentChange(1)">首页</span>
        </el-pagination>
        <el-pagination
          class="table-page"
          @current-change="handelCurrentChange"
          :current-page="tablePageData.currentPage"
          :page-sizes="tablePageData.pageSizes"
          :page-size="tablePageData.pageSize"
          background
          layout="slot"
          :total="tablePageData.total">
          <span class="page-item" @click="handelCurrentChange(Math.ceil(tablePageData.total/tablePageData.pageSize))">末页</span>
          <span class="page-jumper">跳至<el-input class="page-num" v-model="tablePageData.inputNum" @input.native="tablePageData.inputNum = JSON.stringify(tablePageData.inputNum).replace(/[^0-9]/g,'')" @blur="handelCurrentChange(tablePageData.inputNum)" @keyup.enter.native="handelCurrentChange(tablePageData.inputNum)"></el-input>页</span>
        </el-pagination>
      </div>
      <Empty v-show="tableData.length === 0" imgHeight="42%" />
    </div>
  </div>
</template>

<script>
  import Empty from './empty';
  import { ClueResource } from '@/axios/index';
  import { mapGetters, mapActions } from 'vuex';
  export default {
    name: 'PushList',
    components: {
      Empty
    },
    data() {
      return {
        // 表格相关
        listLoading: false,
        tableData: [],
        tablePageData: {
          currentPage: 1,
          pageSize: 10,
          total: 0,
          pageSizes: [10, 20, 50],
          inputNum: 1
        },
        searchParams: {
          platform: 0,
          dwbm: '',
          dlbm: '',
          mc: ''
        },
        // 添加选择
        selectList: [],
        // 平台下拉列表
        platformList: [
          {
            code: 0,
            name: '全部'
          },
          {
            code: 1,
            name: '线索管理平台'
          },
          // {
          //   code: 2,
          //   name: ' 统一业务系统'
          // }
        ]
      }
    },
    mounted() {
      if (this.companyList.length === 0) {
        this.getDeptList();
      }
      this.getTableList();
    },
    methods: {
      ...mapActions([
        'setPeerCompanyList'
      ]),
      getRowKey(row) {
        return row.rybm
      },
      // 获取单位列表
      getDeptList() {
        ClueResource
        .deptList()
        .then(res => {
          if(res && res.data) {
            this.setPeerCompanyList(res.data);
          }
        })
      },
      // 获取推送人员列表数据
      getTableList(page, record) {
        if(page) {
          this.tablePageData.currentPage = page;
          this.tablePageData.inputNum = page;
        }
        let returnTrue = false;
        setTimeout(() => {
          if(!returnTrue) {
            this.listLoading = true;
          }
        }, 100)
        ClueResource
        .deptRyList({
          platform: this.searchParams.platform,
          zzdwbm: this.searchParams.dwbm,
          dlbm: this.searchParams.dlbm,
          mc: this.searchParams.mc,
          pageNo: this.tablePageData.currentPage,
          pageSize: this.tablePageData.pageSize
        })
        .then(res => {
          returnTrue = true;
          if (res.data) {
            this.tableData = res.data.records ? res.data.records : [];
            this.tablePageData.total = res.data.total ? res.data.total : 0;
          }
          this.listLoading = false;
        }).catch(() => {
          returnTrue = true;
          this.listLoading = false;
        })
        
      },
      // 改变每页size
      handelSizeChange(val) {
        this.tablePageData.pageSize = val;
        this.getTableList(1)
      },
      // 切页
      handelCurrentChange(val) {
        val = parseInt(val);
        if(!val || val <= 0) {
          val = 1;
        }
        else if(val > Math.ceil(this.tablePageData.total / this.tablePageData.pageSize)) {
          val = Math.ceil(this.tablePageData.total / this.tablePageData.pageSize);
        }
        this.tablePageData.inputNum = val;
        if(val === this.tablePageData.currentPage) {
          return
        }
        this.tablePageData.currentPage = val;
        this.getTableList();
      },
      handleSelectionChange(val) {
        this.selectList = val
      },
      // 推送
      pushSure() {
        if(this.selectList.length === 0) {
          this.$message.warning('未选择推送人员，请重新选择！')
          return
        }
        this.$emit('pushModelSure', {list: this.selectList, platform: this.searchParams.platform});
      }
    },
    computed: {
      ...mapGetters({
        activeItem: "getActiveItem",
        companyList: "getPeerCompanyList"
      })
    }
  }
</script>

<style scoped lang="scss">
  .manage-content {
    width: 100%;
    height: 100%;
    .search-content {
      height: 112px!important;
      .search-item {
        margin-bottom: 16px;
      }
    }
    .table-content {
      height: calc(100% - 112px)!important;
    }
  }
</style>
